<template>
<div class="app">
  <h2 ref="titleRef">我是标题</h2>
  <button ref="btnRef">按钮</button>
  <button v-on:click="getElements">获取元素,调用元素方法</button>
  <show-info ref="showInfoRef"></show-info>

</div>
</template>

<script>
import ShowInfo from "./ShowInfo.vue";
import {onMounted, ref} from "vue";

export default {
  name: "App",
  components: {ShowInfo},
  setup(props,context){
    const titleRef=ref()
    const btnRef=ref()
    const showInfoRef=ref()

    function getElements(){
      showInfoRef.value.showInfoFoo()
    }

    onMounted(()=>{
      console.log("titleRef:",titleRef.value)
      console.log("btnRef:",btnRef.value)
      console.log("showInfoRef:",showInfoRef.value)
    })

    return{
      titleRef,
      btnRef,
      showInfoRef,
      getElements
    }
  }
}
</script>

<style scoped>

</style>